<template>
  <div id="global-header">
    <a-row id="header-row" align="center" :wrap="false">
      <a-col flex="120px">
        <div class="title-bar">
          <img class="logo" src="../assets/logo.png" />
          <div class="title">鱼答答</div>
        </div>
      </a-col>
      <a-col flex="auto">
        <a-menu mode="horizontal" :selectedKeys="selectedKeys">
          <a-menu-item
            v-for="route in visibleRoutes"
            :key="route.path"
            @click="doClick(route.path)"
            :style="{ padding: 0, marginRight: '38px' }"
          >
            {{ route.name }}
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-col flex="100px">
        <a-input-search :style="{width:'320px'}" placeholder="搜索"/>
      </a-col>
      <a-col flex="100px"></a-col>
      <a-col flex="100px">
        <div v-if="loginUserStore.loginUser.id">
          <a-dropdown trigger="hover">
            <a-avatar>{{
              (loginUserStore.loginUser.userName ?? "无名").substring(0, 1)
            }}</a-avatar>
            {{ loginUserStore.loginUser.userName ?? "无名" }}
            <template #content>
              <a-doption @click="loginUserStore.logout">退出登录</a-doption>
            </template>
          </a-dropdown>
        </div>
        <div v-else>
          <a-button type="primary" href="/user/login">登录</a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import checkAccess from "@/access/checkAccess";
import router from "@/router";
import { routes } from "@/router/routes";
import { useLoginUserStore } from "@/stores/useLoginUserStore";
import { ref } from "vue";
const loginUserStore = useLoginUserStore();

// 展示在菜单的路由数组
const visibleRoutes = routes.filter((item) => {
  if (item.meta?.hideInMenu) {
    return false;
  }
  // 根据权限过滤菜单
  if (!checkAccess(loginUserStore.loginUser, item.meta?.access as string)) {
    return false;
  }
  return true;
});

const doClick = (key: string) => {
  router.push({ path: key });
};

const selectedKeys = ref(["/"]);
router.afterEach((to, from, next) => {
  selectedKeys.value = [to.path];
});
</script>
<style>
.title-bar {
  /*
    水平布局
    */
  display: flex;
  /*垂直居中对齐*/
  align-items: center;
}
.title {
  color: black;
  margin-left: 16px;
}
.logo {
  height: 48px;
}
</style>
